<template>
	<div class="mymapM">
		<!--捜索-->
		<div v-if="loading" class="loading"><van-loading type="spinner" /></div>
		<div class="search-box">
			<div class="search-postion">
				<span class="buts">返回</span>
				<input type="text" placeholder="输入关键字搜索" v-model="search_key" />
				<span class="clear" v-if="search_key" @click="search_key = ''"><van-icon color="#8f8f8f" name="clear" /></span>
				<span class="buts border_but" @click="keySearch()">捜索</span>
			</div>
		</div>
		<div class="con-box con-map" v-show="!search_key">
			<!--地图-->
			<div class="mapbox">
				<div class="map" id="container"></div>
				<div class="sign"></div>
			</div>
		</div>
		<div class="con-box" v-show="!search_key">
			<!--地址列表-->
			<div class="Hlist-box">
				<ul>
					<li v-for="(item, index) in lists" :key="index" @click="onAddressLi(item)">
						<b><van-icon color="#a6a6a6" name="clock" /></b>
						<div>
							<span>{{ item.name }}</span>
							<p>{{ item.address }}</p>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<!--捜索列表-->
		<div class="search-list" v-show="search_key">
			<ul>
				<li v-for="(item, index) in search_list" :key="index" @click="onSearchLi(item.location)">
					<span>{{ item.name }}</span>
					<p>{{ item.address }}</p>
				</li>
				<li v-show="noSearchShow"><p>暂无搜索结果</p></li>
			</ul>
		</div>
	</div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import { Loading,Icon } from 'vant';
export default {
	components:{
		[Loading.name]:Loading,
		[Icon.name]:Icon,
	},
	data() {
	    return {
	      center: "", //经度+纬度
	      search_key: "", //搜索值
	      lists: [], //地点列表
	      search_list: [], //搜索结果列表
	      marker: "",
	      loading: false,
	      noSearchShow: false //无搜索结果提示，无搜索结果时会显示暂无搜索结果
	    };
	},
	mounted() {
		let that = this;
		AMapLoader.load({
			key: 'd6472f06c203c833dfdbc4c98e37a6e7', // 申请好的Web端开发者Key，首次调用 load 时必填
			version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
			plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
			AMapUI: {
				// 是否加载 AMapUI，缺省不加载
				version: '1.1', // AMapUI 缺省 1.1
				plugins: [] // 需要加载的 AMapUI ui插件
			},
			Loca: {
				// 是否加载 Loca， 缺省不加载
				version: '1.3.2' // Loca 版本，缺省 1.3.2
			}
		})
			.then(AMap => {
				that.adMap();
				// AMap.plugin('AMap.Geolocation', function() {
				//   var geolocation = new AMap.Geolocation({
				//     // 是否使用高精度定位，默认：true
				//     enableHighAccuracy: true,
				//     // 设置定位超时时间，默认：无穷大
				//     timeout: 10000,
				//     // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
				//     buttonOffset: new AMap.Pixel(10, 20),
				//     //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
				//     zoomToAccuracy: true,
				//     //  定位按钮的排放位置,  RB表示右下
				//     buttonPosition: 'RB'
				//   })
				//   geolocation.getCurrentPosition(function(status,result){
				//         if(status=='complete'){
                //          that.center=[result.position.lng,result.position.lat];
				//         }else{
				//         }
				//   });
				// })
			})
			.catch(e => {
				console.log(e);
			});
	},
	methods: {
		adMap() {
			// this.loading = true;
			//初始化地图
			var map = new AMap.Map('container', {
				zoom: 14, //缩放级别
				center: this.center //设置地图中心点
				//resizeEnable: true,  //地图初始化加载定位到当前城市
			});
			//获取初始中心点并赋值
			var currentCenter = map.getCenter(); //此方法是获取当前地图的中心点
			this.center = [currentCenter.lng, currentCenter.lat]; //将获取到的中心点的纬度经度赋值给data的center
			console.log(this.center);

			//创建标记
			this.marker = new AMap.Marker({
				position: new AMap.LngLat(currentCenter.lng, currentCenter.lat) // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
			});
			// 将创建的点标记添加到已有的地图实例：
			map.add(this.marker);

			//根据地图中心点查附近地点，此方法在下方
			this.centerSearch();
			//监听地图移动事件，并在移动结束后获取地图中心点并更新地点列表
			var moveendFun = e => {
				// 获取地图中心点
				currentCenter = map.getCenter();
				this.center = [currentCenter.lng, currentCenter.lat];
				this.marker.setPosition([currentCenter.lng, currentCenter.lat]); //更新标记的位置
				//根据地图中心点查附近地点
			};
			//更新数据
			var centerSearch = () => {
				this.loading = true;
				this.centerSearch();
			};

			// 绑定事件移动地图事件
			map.on('mapmove', moveendFun); //更新标记
			map.on('moveend', centerSearch); //更新数据
		},
		centerSearch() {
			AMap.service(['AMap.PlaceSearch'], () => {
				//构造地点查询类
				var placeSearch = new AMap.PlaceSearch({
					type:
						'汽车服务|餐饮服务|购物服务|生活服务|体育休闲服务|医疗保健服务|住宿服务|风景名胜|商务住宅|政府机构及社会团体|科教文化服务|交通设施服务|金融保险服务|公司企业|地名地址信息', // 兴趣点类别
					pageSize: 30, // 单页显示结果条数
					pageIndex: 1, // 页码
					city: '全国', // 兴趣点城市
					autoFitView: false // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
				});
				//根据地图中心点查附近地点
				placeSearch.searchNearBy('', [this.center[0], this.center[1]], 200, (status, result) => {
					if (status == 'complete') {
						this.lists = result.poiList.pois; //将查询到的地点赋值
						this.loading = false;
					}
				});
			});
		},
		keySearch() {
			this.loading = true;
			AMap.service(['AMap.PlaceSearch'], () => {
				//构造地点查询类
				var placeSearch = new AMap.PlaceSearch({
					type:
						'汽车服务|餐饮服务|购物服务|生活服务|体育休闲服务|医疗保健服务|住宿服务|风景名胜|商务住宅|政府机构及社会团体|科教文化服务|交通设施服务|金融保险服务|公司企业|地名地址信息', // 兴趣点类别
					pageSize: 30, // 单页显示结果条数
					pageIndex: 1, // 页码
					city: '全国', // 兴趣点城市
					citylimit: false, //是否强制限制在设置的城市内搜索
					autoFitView: false // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
				});
				//关键字查询
				placeSearch.search(this.search_key, (status, result) => {
					this.loading = false;
					if (status == 'complete') {
						if (result.poiList.count === 0) {
							this.noSearchShow = true;
						} else {
							this.search_list = result.poiList.pois; //将查询到的地点赋值
							this.noSearchShow = false;
						}
					} else {
						this.search_list = [];
						this.noSearchShow = true;
					}
				});
			});
		},
		onAddressLi(e) {
			console.log(e);
			this.marker.setPosition([e.location.lng, e.location.lat]); //更新标记的位置
		},
		onSearchLi(e) {
			console.log(e.lng + '-' + e.lat);
			this.center = [e.lng, e.lat];
			console.log(this.center);
			this.search_key = '';
			// this.loading=true;
			setTimeout(() => {
				this.adMap();
			}, 1000);
		}
	},
	watch: {
		search_key(newv, oldv) {
			if (newv == '') {
				this.search_list = [];
				this.noSearchShow = false;
				setTimeout(() => {
					this.adMap();
				}, 1000);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.con-map {
	height: 190px;
	width: 100%;
}
.con-box {
	.mapbox {
		margin-bottom: 10px;
		position: fixed;
		z-index: 111;
		width: 100%;
		height: 180px;
		padding: 10px 0;
		background: #eceeee;

		.map {
			width: 100%;
			height: 180px;
		}
	}

	.Hlist-box {
		width: 96%;
		margin: 0 auto;
		background: #fff;
		border-radius: 5px;
		li {
			// height: 40px;
			padding: 14px 22px;
			border-bottom: 1px solid #d9d9d9;
			display: flex;
			b {
				display: inline-block;

				i {
					margin: 18px 18px 0 0;
				}
			}
			div {
				width: 100%;
			}
			span {
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				font-size: 15px;
				display: inline-block;
				width: 90%;
			}
			p {
				// margin-top: 10px;
				color: #a6a6a6;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				font-size: 13px;
				width: 90%;
			}
		}
	}
}
.mymapM {
	overflow-x: hidden;
	.search-box {
		height: 48px;

		line-height: 48px;
		background: #fff;

		border-bottom: 1px solid #bfbec4;

		.search-postion {
			height: 48px;
			line-height: 48px;
			background: #fff;
			border-bottom: 1px solid #bfbec4;
			width: 100%;
			position: fixed;
			z-index: 99999;
			display: flex;
			input {
				flex: 4;
				padding: 16px 0;
				border: none;
				text-indent: 10px;
			}
			.clear {
				margin: 2px 6px;
			}
			.buts {
				width: 15%;
				text-align: center;
				display: inline-block;
				flex: 1;
			}
			.border_but {
				border-left: 1px solid #8f8f8f;
				line-height: 14px;
				margin: 17px 0;
			}
		}
	}
	.search-list {
		width: 96%;
		margin: 0 auto;
		margin-top: 10px;
		border-radius: 5px;
		background: #fff;
		li {
			padding: 14px 22px;
			border-bottom: 1px solid #d9d9d9;
			span {
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				font-size: 15px;
				display: inline-block;
				width: 90%;
			}
			p {
				margin-top: 10px;
				color: #a6a6a6;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				font-size: 13px;
				width: 90%;
			}
		}
	}
}
.loading {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 99999999;
}
</style>
